import {
	DataQueryPage,
	FormBox,
	TableBox,
	dialog,
	drawer,
	FormItemOptions,
	PopupComponentEvent,
	Drawer,
	OptionType,
	MapType,
} from "@pkg";
import { UploadUserFile } from "element-plus";
let id = 0;
interface TestForm {
	name: string;
	address: string;
	sex: string;
	date: Date;
	selectDate: Date[];
	img: MapType[];
	name1: string;
	name2: string;
	name3: string;
	name4: string;
	time: string;
}
interface TestTable {
	name: string;
	name1: string;
	name2: number | string;
	name3: number | string;
	name4: number;
	switchTest: string;
	children?: TestTable;
}

export default class Test1Page extends DataQueryPage<TestForm, TestTable> {
	private testDreawer!: Drawer;
	constructor() {
		super("test", "");
	}
	initForm(form: FormBox<TestForm>): void {
		form.addFormItem({
			component: "Input",
			key: "name",
			label: "名字：",
			value: "",
			placeholder: "请输入名称",
			rule: [
				{
					required: true,
					message: "请输入姓名",
				},
				{
					required: true,
					min: 3,
					max: 5,
					message: "Length should be 3 to 5",
				},
			],
		});

		const RoleList = async (): Promise<Array<OptionType>> => {
			return [];
		};

		form.addFormItem({
			component: "Select",
			key: "sex",
			label: "性别",
			value: "女",
			placeholder: "请选择性别",
			conf: {
				options: async () => await RoleList(),
			},
		});

		form.addFormItem({
			component: "Select",
			key: "date",
			label: "出生时间",
			placeholder: "请选择出生时间",
			value: new Date(),
			conf: {
				options: [],
			},
		});
		this.addFormItem({
			component: "DatePicker",
			key: "selectDate",
			label: "选择时间区间",
			placeholder: "请选择时间区间",
			value: [new Date(), new Date(1692892800000)],
			conf: {
				type: "datetime",
			},
		});
		this.addFormItem({
			component: "TimePicker",
			key: "time",
			label: "选择时分",
			value: "", // 1704340669499
		});
		this.addFormButton({
			key: "btn0",
			label: "获取表单数据",
			type: "default",
			icon: "AlarmClock",
			click: () => {
				console.log(this.getFormValue());
			},
		});
		this.addFormButton({
			key: "btn1",
			label: "表格数据更新",
			icon: "Apple",
			type: "danger",
			click: () => {
				this.setTableSource([
					{
						name: "https://ecmb.bdimg.com/tam-ogel/1815134652_-1760084283_1200_1200.png",
						name1: "王五",
						name2: 1,
						name3: "5555555555",
						name4: 666662500,
						switchTest: "0",
					},
					{
						name: "https://ecmb.bdimg.com/tam-ogel/1815134652_-1760084283_1200_1200.png",
						name1: "王五",
						name2: 66666666666,
						name3: "66666666666",
						name4: 666662500,
						switchTest: "1",
					},
					{
						name: "https://ecmb.bdimg.com/tam-ogel/1815134652_-1760084283_1200_1200.png",
						name1: "王五33",
						name2: 66666666666,
						name3: "66666666666",
						name4: 666662500,
						switchTest: "1",
					},
				]);
			},
		});
		this.addFormButton({
			key: "btn3232",
			label: "重置表单",
			icon: "Apple",
			type: "danger",
			click: () => {
				form.reset();
				console.log(form.getFormValue());
			},
		});
		this.addFormButton({
			key: "btn66",
			label: "清空表格数据",
			icon: "Apple",
			type: "info",
			click: () => {
				this.setTableSource([]);
			},
		});
		this.addFormButton({
			key: "btn2",
			label: "设置表格可选",
			type: "primary",
			icon: "Avatar",
			click: () => {
				this.setTableSelection(true);
			},
		});
		this.addFormButton({
			key: "btn3",
			label: "设置表格不可选",
			type: "warning",
			icon: "WindPower",
			click: () => {
				this.setTableSelection(false);
			},
		});
		this.addFormButton({
			key: "btn322",
			label: "获取表格选中数据",
			type: "warning",
			icon: "WindPower",
			click: () => {
				console.log(this.getTableSelectionData());
			},
		});
	}
	initTable(table: TableBox<TestTable>): void {
		this.setTableSource([
			{
				name: "https://ecmb.bdimg.com/tam-ogel/1815134652_-1760084283_1200_1200.png",
				name1: "王五",
				name2: 1,
				name3: "5555555555",
				name4: 666662500,
				switchTest: "0",
			},
			{
				name: "https://ecmb.bdimg.com/tam-ogel/1815134652_-1760084283_1200_1200.png",
				name1: "王五",
				name2: 66666666666,
				name3: "66666666666",
				name4: 666662500,
				switchTest: "1",
			},
			{
				name: "https://ecmb.bdimg.com/tam-ogel/1815134652_-1760084283_1200_1200.png",
				name1: "王五888",
				name2: 66666666666,
				name3: "66666666666",
				name4: 666662500,
				switchTest: "1",
			},
		]);

		// this.setTableSource([
		// 	{
		// 		key: "name1",
		// 		name: "姓名",
		// 	},
		// 	{
		// 		key: "name",
		// 		name: "图片",
		// 		component: "TableImage",
		// 	},
		// 	{
		// 		key: "name2",
		// 		name: "时间2",
		// 		format: "date",
		// 	},
		// 	{
		// 		key: "name3",
		// 		name: "时间_time",
		// 		format: "dateTime",
		// 	},
		// 	{
		// 		key: "name4",
		// 		name: "金额",
		// 		format: "money",
		// 	},
		// ]);

		table.setTableSelection(true);
		table.addTableCol({ key: "name", name: "图片", component: "TableImage" });
		table.addTableCol({
			key: "switchTest",
			name: "测试switch",
			component: "TableSwitch",
			callback: (e: any, i: number, data: any) => {
				console.log(e, i, data);
			},
		});
		// table.setTableSelectionData(this.getTableSource()); // 初始化选中
		table.addTableOpr({
			name: "消息",
			type: "default",
			icon: "Message",
			callback: () => {
				this.showMsgBox({
					title: "测试",
					content: "您好",
				});
			},
		});
		table.addTableOpr({
			name: "新增",
			type: "primary",
			icon: "Aim",
			callback: () => {},
			show(e) {
				return e.name2 !== 1;
			},
		});
		table.addTableOpr({
			name: "编辑",
			type: "warning",
			icon: "Edit",
			callback: () => {
				this.showEditDialog();
			},
			show(e) {
				return e.name2 === 1;
			},
		});
		table.addTableOpr({
			name: "新增表单",
			type: "warning",
			icon: "Edit",
			callback: () => {
				const arr: FormItemOptions<TestForm>[] = [
					{
						key: "name3",
						value: "1",
						label: "测试字段",
						component: "Input",
					},
					{
						key: "name4",
						value: "22222",
						label: "测试字段2",
						component: "Input",
					},
				];
				arr.forEach(e => {
					this.addFormItem(e);
				});
			},
		});
		// table.addTableOpr({
		// 	name: "侧边栏",
		// 	type: "danger",
		// 	icon: "Drizzling",
		// 	callback: () => {
		// 		this.showTestDrawer();
		// 	},
		// });
	}

	private async showEditDialog() {
		let editDialog: PopupComponentEvent | undefined = undefined;
		const dialogEvent = dialog
			.initForm(form => {
				form.addFormItem({
					component: "Input",
					key: "test1",
					label: "测试1",
					value: "",
					rule: [
						{
							required: true,
							message: "请输入姓名",
						},
						{
							required: true,
							min: 3,
							max: 5,
							message: "Length should be 3 to 5",
						},
					],
				});
				form.addFormItem({
					component: "Input",
					key: "test2",
					label: "测试2",
					value: "强先生",
					rule: [
						{
							required: true,
							message: "请输入姓名",
						},
						{
							required: true,
							min: 3,
							max: 5,
							message: "Length should be 3 to 5",
						},
					],
				});
				form.addFormItem({
					component: "Input",
					key: "test3",
					label: "测试3",
					value: "强先生",
					rule: [
						{
							required: true,
							message: "请输入姓名",
						},
						{
							required: true,
							min: 3,
							max: 5,
							message: "Length should be 3 to 5",
						},
					],
				});
				form.addFormItem({
					component: "Select",
					key: "test4",
					label: "测试下拉框数据",
					value: "测试下拉框数据",

					rule: [
						{
							required: true,
							message: "请输入姓名",
						},
						{
							required: true,
							min: 3,
							max: 5,
							message: "Length should be 3 to 5",
						},
					],
				});
			})
			.initButton(buttonGroup => {
				buttonGroup.addButton({
					name: "测试按钮",
					callback: () => {
						editDialog?.getFormInstance().addFormItem({
							key: "testddd" + Math.random(),
							value: "11" + Math.random(),
							label: "测试案例" + Math.random(),
							component: "Input",
						});
						editDialog?.getFormInstance().setFormItemValue("test1", "你好");
						this.showSuccMsg("请求成功");
					},
				});
			});
		editDialog = await dialogEvent.open({
			title: "弹出框1",
		});
		// 设置表单值
		editDialog.getFormInstance().getFormValue();
		// 获取表单值
		editDialog.getFormInstance().setFormValue({});
	}
	private showTestDrawer() {
		let testDreawerForm: PopupComponentEvent | undefined = undefined;
		this.testDreawer = drawer
			.initForm(form => {
				form.addFormItem({
					component: "Input",
					key: "test1",
					label: "测试1",
					value: "",
					rule: [
						{
							required: true,
							message: "请输入姓名",
						},
						{
							required: true,
							min: 3,
							max: 5,
							message: "Length should be 3 to 5",
						},
					],
				});
				form.addFormItem({
					component: "Input",
					key: "test2",
					label: "测试2",
					value: "强先生",
					rule: [
						{
							required: true,
							message: "请输入姓名",
						},
						{
							required: true,
							min: 3,
							max: 5,
							message: "Length should be 3 to 5",
						},
					],
				});

				form.addFormItem({
					component: "Input",
					key: "test3",
					label: "测试3",
					value: "强先生23324234",

					rule: [
						{
							required: true,
							message: "请输入姓名",
						},
						{
							required: true,
							min: 3,
							max: 5,
							message: "Length should be 3 to 5",
						},
					],
				});
				form.addFormItem({
					component: "Input",
					key: "test4",
					label: "测试4",
					value: "强先生",
					rule: [
						{
							required: true,
							message: "请输入姓名",
						},
						{
							required: true,
							min: 3,
							max: 5,
							message: "Length should be 3 to 5",
						},
					],
				});
			})
			.initButton((buttonGroup, others) => {
				buttonGroup.addButton({
					name: "新增图片",
					callback: () => {
						testDreawerForm?.getFormInstance().addFormItem({
							component: "UploadImg",
							key: "test",
							rule: "RequiredRule",
							value: [],
							label: "上传图片",
						});
					},
				});
				buttonGroup.addButton({
					name: "测试按钮",
					callback: () => {
						others?.form.verify();
						this.showSuccMsg("请求成功");
					},
				});
			});
		testDreawerForm = this.testDreawer.open({
			title: "弹出框1",
			width: "200px",
		});
	}
}
